<template>
  <div class="zk-wiki-right" v-if="wiki">
    <div class="markdown-body" v-html="contValue"></div>
    <x-markdown v-show="false" ref="alaboMarkdown"></x-markdown>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    props: {
      project: {}
    },
    data () {
      return {
        wiki: null,
        contValue: ''
      }
    },
    methods: {
      init (data) {
        this.wiki = data
        if (!this.wiki) {
          return
        }
        this.$ala.setTitle(`${this.wiki.name} ${this.project.name}`)
        this.$nextTick(() => {
          if (this.wiki.content) {
            this.contValue = this.$refs.alaboMarkdown.$children[0].markdownIt.render(this.wiki.content)
          } else {
            this.contValue = this.wiki.content
          }
        })
      }
    }
  }
</script>
<style lang="scss"  scoped >
  .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
  }

  @media (max-width: 767px) {
    .markdown-body {
      padding: 15px;
    }
  }
  .zk-wiki-right {
    width: 100%;
    background: #ffffff;
    overflow: auto;
    .wiki-right_contion {
      position: relative;
      left: 50%;
      transform: translateX(-50%);

      .title {
        margin-top: 10px;
        border-bottom: 1px solid #e6e6e6;
        text-decoration: none;
        color: #304455;
        font-size: 20px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-weight: bold;
        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
      }
    }
    .right-content {
      padding: 20px;
      margin-bottom: 50px;
    }
  }
</style>
